<template>
  <!-- 页面布局card通用组件 -->
  <PageCard>
    <!-- 头部工具栏 -->
    <ToolBar>
      <el-form :model="queryForm" label-width="60px">
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="关键词:">
              <el-input v-model="queryForm.keyword" placeholder="名称" style="100%;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-button type="default" @click="loadTableData">查询</el-button>
            <el-button type="default" @click="resetQuery">重置</el-button>
            <el-button type="primary" @click="addUnit" v-show="$btnPermission.verify('AddGoodsUnit')">新增</el-button>
          </el-col>
        </el-row>
      </el-form>
    </ToolBar>

    <!-- 表格 -->
    <TablePage ref="goodsUnitTablePage" :customTableHeight="255" :loading.sync="loading" :table-data="goodsUnitTableDatas" :columns="columns" @reloadData="loadTableData"/>

    <!-- 新增 -->
    <AddGoodsUnit :showDialog.sync="addUnitConfig.showDialog" @reloadData="loadTableData"/>
  </PageCard>
</template>
<script>
import PageCard from '@/components/PageCard/index.vue'
import ToolBar from '@/components/ToolBar/index.vue'
import TablePage from '@/components/TablePage/index.vue'
import AddGoodsUnit from './components/addGoodsUnit.vue'

import { goodsUnitPage, goodsUnitEnabled } from '@/api/goods/unit'

export default {
  name: 'GoodsUnitPage',
  components: {
    PageCard,
    ToolBar,
    TablePage,
    AddGoodsUnit
  },
  data() {
    return {
      loading: false,
      addUnitConfig: {
        showDialog: false
      },
      queryForm: null,
      initForm:{
        keyword: ''
      },
      goodsUnitTableDatas: [],
      columns: [{
        title: '名称',
        name: 'unitName',
        width: 150,
        align: 'center'
      }, {
        title: '排序',
        name: 'sort',
        width: 150,
        align: 'center'
      }, {
        title: '启用状态',
        name: 'isEnabled',
        width: 150,
        align: 'center',
        select: true,
        options: this.$config.ENABLED_STATUS
      },{
        title: '操作',
        name: 'operate',
        width: 100,
        operate: [{
          name: '启用',
          fun: this.enabledNuit,
          permission: 'EnabledUnit',
          confirm: true,
          message: '确定启用选择的数据吗?',
          onShow: (row)=> {
            return row.isEnabled === 0
          },
          customStyle: {
            'margin-left': '10px'
          }
        }, {
          name: '禁用',
          fun: this.disabledUnit,
          permission: 'DisabledUnit',
          confirm: true,
          message: '确定禁用选择的数据吗?',
          onShow: (row)=> {
            return row.isEnabled === 1
          },
          customStyle: {
            'margin-left': '10px'
          }
        }]
      }]
    }
  },
  created() {
    this.queryForm = { ...this.initForm }
    this.$nextTick(()=> {
      this.loadTableData()
    })
  },
  methods: {
    // 加载数据
    async loadTableData() {
      this.loading = true
      const {pageNumber, pageSize} = this.$refs.goodsUnitTablePage.page
      const res = await goodsUnitPage({pageNumber, pageSize, ...this.queryForm})
      this.$refs.goodsUnitTablePage.page.pageNumber = res.data.pageNumber
      this.$refs.goodsUnitTablePage.page.pageSize = res.data.pageSize
      this.$refs.goodsUnitTablePage.page.total = res.data.total
      this.goodsUnitTableDatas = res.data.rows
      this.loading = false
    },

    // 重置查询
    resetQuery() {

    },

    // 新增
    addUnit() {
      this.addUnitConfig.showDialog = true
    },

    enabledNuit(row) {
      if(!row) return

      this.enabled(row.id, 1)
    },

    disabledUnit(row) {
      if(!row) return

      this.enabled(row.id, 0)
    },

    async enabled(id, isEnabled) {
      await goodsUnitEnabled(id, isEnabled)
    }
  }
}
</script>
<style lang="scss" scoped>

</style>